<template>
  <div class="app" @mousemove="mouseMove">
    <h2>鼠标在当前元素内的x轴坐标--{{ mouseX }}</h2>
    <h2>鼠标在当前元素内的y轴坐标--{{ mouseY }}</h2>
    <button @click="getDog">点击加载图片</button>
    <img width="300" :src="dogUrl" alt="" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
import useMousePoint from "./hooks/useMousePoint";
import useGetDog from "./hooks/useGetDog";
//1.鼠标移动打印坐标的效果
const { mouseX, mouseY, mouseMove } = useMousePoint();


//2.点击加载狗的图片
const { dogUrl, getDog } = useGetDog();
</script>

<style scoped>
.app {
  width: 100%;
  height: 500px;
  border: 1px solid #000;
}
</style>
